<template>
<div class="filter-wrapper">
  <div class="filter-house_box" :class="{'showHeight':show}">
    <!-- <div class="filter-row_wrapper">
      <div class="filter-label">位置</div>
      <div class="filter-list">
        <div class="nav">区域</div>
        <div class="nav">地铁</div>
      </div>
    </div>
    <div class="filter-row_wrapper " >
      <div class="filter-label"></div>
      <div class="filter-list filter-bg">
        <div class="form-check">
          <div>
            <span
              v-if="false"
              class="iconfont icon-CheckboxChecked-1 checkitem"
            ></span>
            <span v-else class="iconfont icon-Other-17 checkitem"></span>
          </div>
          <label class="form-check-label"> 1212 </label>
        </div>
      </div>
    </div> -->

    <div
      class="filter-row_wrapper"
      v-for="(row, index) in filterList"
      :key="index"
    >
      <div class="filter-label">{{ row.label }}</div>
      <div class="filter-list">
        <div
          class="form-check"
          v-for="(checkItem, i) in row.list"
          :key="i"
          @click="change(index, i)"
        >
          <div>
            <span
              v-if="checkItem.cheked"
              class="iconfont icon-CheckboxChecked-1 checkitem"
            ></span>
            <span v-else class="iconfont icon-Other-17 checkitem"></span>
          </div>
          <label class="form-check-label">
            {{ checkItem.value }}
          </label>
        </div>
      </div>
    </div>
  </div>
  <div @click="changeShow" class="pointer more" >
      <div class="line-box"> 
          <div class="line"></div>
          <div class="text">{{ show ? '收起' : '更多' }}</div>  
          <div class="line"></div></div>
  </div>
</div>
</template>


<script >
import { defineComponent, reactive, toRefs } from "vue";

export default defineComponent({
  setup(props,context) {
    const data = reactive({
      filterList: [
        
        {
          label: "参考均价",
          list: [
            { value: "0.8万以下", cheked: false },
            { value: "0.8-1.5万", cheked: false },
            { value: "1.5-2万", cheked: false },
            { value: "2-2.5万", cheked: false },
            { value: "2.5-3万", cheked: false },
            { value: "3万以上", cheked: false },
          ],
          key: "refer_price",
        },
        // {
        //   label: "总价",
        //   list: [
        //     { value: "0.8万以下", cheked: false },
        //     { value: "0.8-1.5万", cheked: false },
        //     { value: "1.5-2万", cheked: false },
        //     { value: "2-2.5万", cheked: false },
        //     { value: "2.5-3万", cheked: false },
        //     { value: "3万以上", cheked: false },
        //   ],
        //   key: "",
        // },
        // {
        //   label: "户型",
        //   list: [
        //     { value: "一室", cheked: false },
        //     { value: "二室", cheked: false },
        //     { value: "三室", cheked: false },
        //     { value: "四室", cheked: false },
        //     { value: "五室", cheked: false },
        //     { value: "五室及以上", cheked: false },
        //   ],
        //   key: "",
        // },
        // {
        //   label: "面积",
        //   list: [
        //     { value: "50m²以下", cheked: false },
        //     { value: "50-80m²", cheked: false },
        //     { value: "80-100m²", cheked: false },
        //     { value: "100-120m²", cheked: false },
        //     { value: "120-150m²", cheked: false },
        //     { value: "150-200m²", cheked: false },
        //   ],
        //   key: "",
        // },
        // {
        //   label: "类型",
        //   list: [
        //     { value: "住宅", cheked: false },
        //     { value: "别墅", cheked: false },
        //     { value: "公寓", cheked: false },
        //     { value: "商铺", cheked: false },
        //     { value: "写字楼", cheked: false },
        //     { value: "综合体", cheked: false },
        //   ],
        //   key: "",
        // },
        {
          label: "装修状态",
          list: [
            { value: "不限", cheked: false },
            { value: "毛坯", cheked: false },
            { value: "带装修", cheked: false },
            { value: "高档装修", cheked: false },
            { value: "豪华装修", cheked: false },
          ],
          key: "renova_status",
        },
        {
          label: "特色楼盘",
          list: [
            { value: "低总价", cheked: false },
            { value: "小户型", cheked: false },
            { value: "教育地产", cheked: false },
            { value: "旅游地产", cheked: false },
            { value: "宜居生态", cheked: false },
            { value: "低密居所", cheked: false },
            { value: "公园地产", cheked: false },
            { value: "普通住宅", cheked: false },
            { value: "商业综合体", cheked: false },
            { value: "豪华居住区", cheked: false },
            { value: "大平层", cheked: false },
            { value: "商业地产", cheked: false },
          ],
          key: "item_pro",
        },
        {
          label: "销售状态",
          list: [
            { value: "待售", cheked: false },
            { value: "在售", cheked: false },
            { value: "现房", cheked: false },
            { value: "尾房", cheked: false },
            { value: "售完", cheked: false },
          ],
          key: "",
        },
        {
          label: "建筑类别",
          list: [
            { value: "塔楼", cheked: false },
            { value: "板楼", cheked: false },
            { value: "别墅", cheked: false },
            { value: "高层", cheked: false },
            { value: "超高层", cheked: false },
          ],
          key: "",
        },
        {
          label: "楼盘类型",
          list: [
            { value: "普通住宅", cheked: false },
            { value: "公寓", cheked: false },
            { value: "商住", cheked: false },
            { value: "别墅", cheked: false },
            { value: "写字楼", cheked: false },
            { value: "商铺", cheked: false },
            { value: "洋房", cheked: false },
            { value: "其他", cheked: false },
          ],
          key: "pro_type",
        },
        //  {
        //   label: "状态",
        //   list: [
        //     { value: "在售", cheked: false },
        //     { value: "待售", cheked: false },
        //     { value: "售罄", cheked: false },
        //   ],
        //   key: "",
        // },
        //  {
        //   label: "开盘",
        //   list: [
        //     { value: "最近开盘", cheked: false },
        //     { value: "未来1个月", cheked: false },
        //     { value: "未来3个月", cheked: false },
        //     { value: "过去1个月", cheked: false },
           
        //   ],
        //   key: "",
        // },
        // {
        //   label: "特色",
        //   list: [
        //     { value: "精选笋盘", cheked: false },
        //     { value: "优惠楼盘", cheked: false },
        //     { value: "学区房", cheked: false },
        //     { value: "小户型", cheked: false },
        //     { value: "近地铁", cheked: false },
        //     { value: "品牌业务", cheked: false },
        //   ],
        //   key: "",
        // },
      ],
      show: false,
    });

    const change = (index, i)=> {
      data.filterList[index].list[i].cheked = !data.filterList[index].list[i].cheked;
      let params = {}
      data.filterList.forEach((row) => {
        row.list.forEach(( item , index )=> {
          if(item.cheked) {
            params[row.key] =params[row.key] ? `${params[row.key]},${index + 1}` :index + 1 
          }
        })
      }) 
      context.emit('changeFilter',params)
    };
    const changeShow = () => {
        data.show = !data.show
    }
    return {
      change,
      changeShow,
      ...toRefs(data),
    };
  },
});
</script>


<style lang="scss">
.filter-wrapper {
  width: 1200px;
}
.filter-house_box {
    width: 100%;
    height: 230px;
    margin: 20px auto;
    overflow: hidden;
    &.showHeight{
        height: 100%;
    }
  .filter-row_wrapper {
    display: flex;
    .filter-label {
      color: #333;
      font-size: 14px;
      font-weight: bold;
      width: 60px;
      line-height: 36px;
    }
    .filter-list {
      display: flex;
      flex: 1;
      .nav {
          margin-right: 20px;
          font-size: 14px;
          line-height: 36px;
          cursor: pointer;
      }
      .form-check {
        &:hover {
          .icon-Other-17 {
            color: #3f85ff;
          }
          .form-check-label {
            color: #3f85ff;
          }
        }
        cursor: pointer;
        width: 140px;
        display: flex;

        .icon-Other-17 {
          color: #dee3e8;
        }
        .checkitem {
          font-size: 24px;
          vertical-align: middle;
          margin-right: 6px;
        }
        .icon-CheckboxChecked-1 {
          color: #3f85ff;
        }
        .form-check-label {
          color: #696969;
          text-align: left;
          line-height: 1;
          display: flex;
          align-items: center;
          cursor: pointer;
          width: 100px;
          font-size: 12px;
        }
      }
    }
  }

  .filter-bg {
    background: #f6f6f6;
    min-height: 31px;
    margin-bottom: 10px;
  }
}
.more {
    font-size: 12px;
    display: flex;
    justify-content: center;
    .line-box {
        display: flex;
        .line{
            display: inline-block;
            width: 100px;
            height: 1px;
            background: #e0e0e0;
            vertical-align: middle;
            margin-top: 10px;
        }
        .text {
            margin-left: 10px;
            margin-right: 10px;
            color: #aaa;
        }
    }
}
</style>

